<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el和data的两种写法</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--    插值语法-->
    <input v-bind:value="name"/>
    <hr/>
    <input v-model:value="name"/>

</div>
</body>
<script type="text/javascript">
    //第一种写法
    /*  const x = new Vue({
        el: '#app',
        //data的对象式写法
        data: {
          name: '插值语法',
          url: 'https://www.baidu.com/',
          url2: 'https://www.baidu.com/'
        }
      })*/
    Vue.config.productionTip = false
    const x = new Vue({
        //data的函数式写法
        data() {
            //this指向Vue实例
            //如果写的是箭头函数，this指向window,不能访问到data中的数据，所以不要写箭头函数
            console.log(this)
            return {
                name: '插值语法',
                url: 'https://www.baidu.com/',
                url2: 'https://www.baidu.com/'
            }
        }
    })
    //先创建vue实例再配置el属性
    x.$mount('#app')
</script>
</html>